<template>
    <div id="main-container" ref="appRef">
        <div class="g-bg">
            <span>天生我材必有用，千金散尽还复来</span>
            <Chart1 />
        </div>
    </div>
</template>

<script setup>
import useDraw from "@/utils/useDraw"
import { onMounted, onUnmounted } from 'vue';
import Chart1 from "@/components/Chart1.vue";

// * 适配处理
const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw("app")
// 生命周期
onMounted(() => {
    // todo 屏幕适应
    windowDraw()
    calcRate()
})

onUnmounted(() => {
    unWindowDraw()
})

</script>

<style lang="less" scoped>
#main-container {
    background: #d3d6dd;
    width: 1920px;
    height: 1080px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: left top;

    .g-bg {
        width: 100%;
        height: 100%;
        background-color: aqua;
    }
}
</style>